<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="样木直径录入/更新" name="first">
      <ul class="sjlr">
        <li style="margin-bottom: 10px;">
          选择样木：
          <el-cascader v-model="treeId" :options="treeSelect" :props="props_cascader" clearable placeholder="请选择样木"
            style="width: 350px;" />
          <span v-if="treeId" style="margin-left: 20px;color: #ef4949;">已选样木ID：{{ treeId[3] ? treeId[3] : treeId
          }}</span>
        </li>
        <li v-if="treeId">
          <span class="title">带皮直径：</span>
          <el-form :inline="true" ref="formDaipiRef" :model="formDaipi" :rules="rules" label-width="100px">
            <el-form-item label="0根颈处" prop="p0">
              <el-input-number v-model="formDaipi.p0" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="0.5/10处" prop="p05">
              <el-input-number v-model="formDaipi.p05" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="1/10处" prop="p1">
              <el-input-number v-model="formDaipi.p1" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>

            <el-form-item label="2/10处" prop="p2">
              <el-input-number v-model="formDaipi.p2" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="3/10处" prop="p3">
              <el-input-number v-model="formDaipi.p3" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="4/10处" prop="p4">
              <el-input-number v-model="formDaipi.p4" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="5/10处" prop="p5">
              <el-input-number v-model="formDaipi.p5" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="6/10处" prop="p6">
              <el-input-number v-model="formDaipi.p6" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="7/10处" prop="p7">
              <el-input-number v-model="formDaipi.p7" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="8/10处" prop="p8">
              <el-input-number v-model="formDaipi.p8" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="9/10处" prop="p9">
              <el-input-number v-model="formDaipi.p9" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>

            <el-form-item label="备注" prop="remark" style="width: 250px;">
              <el-input v-model="formDaipi.remark" type="textarea" :rows="1" />
            </el-form-item>

          </el-form>
          <el-button :type="daipiType" :disabled="daipiDisabled" :icon="DocumentAdd"
            @click="handleSave('daipi')">保存</el-button>
        </li>
        <li v-if="treeId">
          <span class="title">皮厚：</span>
          <el-form :inline="true" ref="formPihouRef" :model="formPihou" :rules="rules" label-width="100px">
            <el-form-item label="0根颈处" prop="p0">
              <el-input-number v-model="formPihou.p0" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="0.5/10处" prop="p05">
              <el-input-number v-model="formPihou.p05" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="1/10处" prop="p1">
              <el-input-number v-model="formPihou.p1" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>

            <el-form-item label="2/10处" prop="p2">
              <el-input-number v-model="formPihou.p2" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="3/10处" prop="p3">
              <el-input-number v-model="formPihou.p3" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="4/10处" prop="p4">
              <el-input-number v-model="formPihou.p4" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="5/10处" prop="p5">
              <el-input-number v-model="formPihou.p5" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="6/10处" prop="p6">
              <el-input-number v-model="formPihou.p6" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="7/10处" prop="p7">
              <el-input-number v-model="formPihou.p7" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="8/10处" prop="p8">
              <el-input-number v-model="formPihou.p8" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="9/10处" prop="p9">
              <el-input-number v-model="formPihou.p9" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>

            <el-form-item label="备注" prop="remark" style="width: 250px;">
              <el-input v-model="formPihou.remark" type="textarea" :rows="1" />
            </el-form-item>

          </el-form>
          <el-button :type="pihouType" :disabled="pihouDisabled" :icon="DocumentAdd"
            @click="handleSave('pihou')">保存</el-button>
        </li>
        <li v-if="treeId">
          <span class="title">去皮直径：</span>
          <el-form :inline="true" ref="formQupiRef" :model="formQupi" :rules="rules" label-width="100px">
            <el-form-item label="0根颈处" prop="p0">
              <el-input-number v-model="formQupi.p0" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="0.5/10处" prop="p05">
              <el-input-number v-model="formQupi.p05" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="1/10处" prop="p1">
              <el-input-number v-model="formQupi.p1" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>

            <el-form-item label="2/10处" prop="p2">
              <el-input-number v-model="formQupi.p2" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="3/10处" prop="p3">
              <el-input-number v-model="formQupi.p3" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="4/10处" prop="p4">
              <el-input-number v-model="formQupi.p4" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="5/10处" prop="p5">
              <el-input-number v-model="formQupi.p5" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="6/10处" prop="p6">
              <el-input-number v-model="formQupi.p6" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="7/10处" prop="p7">
              <el-input-number v-model="formQupi.p7" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="8/10处" prop="p8">
              <el-input-number v-model="formQupi.p8" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="9/10处" prop="p9">
              <el-input-number v-model="formQupi.p9" :min="0" :precision="1" :step="0.1" controls-position="right">
                <template #suffix> <span>cm</span> </template>
              </el-input-number>
            </el-form-item>

            <el-form-item label="备注" prop="remark" style="width: 250px;">
              <el-input v-model="formQupi.remark" type="textarea" :rows="1" />
            </el-form-item>

          </el-form>
          <el-button :type="qupiType" :disabled="qupiDisabled" :icon="DocumentAdd"
            @click="handleSave('qupi')">保存</el-button>
        </li>
      </ul>
    </el-tab-pane>

    <el-tab-pane label="未录入直径的样木" name="second">
      <el-table v-loading="loading2" :data="NoDiaTree"
        style="border-left: 1px solid #eee;border-right: 1px solid #eee;">
        <el-table-column prop="id" label="样木ID" fixed sortable width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="address_city" label="市" sortable align="center" show-overflow-tooltip />
        <el-table-column prop="address_name" label="样地名称" sortable align="center" show-overflow-tooltip />
        <el-table-column prop="treeSpecies_name" label="树种" align="center" show-overflow-tooltip />
        <el-table-column prop="number" label="编号" align="center" show-overflow-tooltip />

        <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip />
        <el-table-column prop="action" label="操作" fixed="right" align="center" width="120px">
          <template v-slot="scope">
            <el-button-group class="ml-3" size="small">
              <el-button v-if="scope.row.code != 'superAdmin'" type="success" :icon="Edit"
                @click="addDia(scope.row.id)">录入数据</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination v-model:currentPage="queryForm2.pageNum" v-model:page-size="queryForm2.pageSize" size="small"
        :page-sizes="[15, 30, 50, total2 > 100 ? total2 : 100]" layout="total, sizes, prev, pager, next" :total="total2"
        @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />

    </el-tab-pane>

    <el-tab-pane label="已录入数据" name="third">
      <el-row :gutter="20" class="header">
        <el-col :span="7">
          <el-input placeholder="请选择样木..." v-model="queryForm.query" clearable></el-input>
        </el-col>
        <el-button type="primary" :icon="Search" @click="initTreeDiaList">搜索</el-button>
        <el-popconfirm title="您确定批量删除这些记录吗？" @confirm="handleDelete(null)">
          <template #reference>
            <el-button type="danger" :disabled="delBtnStatus" :icon="Delete">批量删除</el-button>
          </template>
        </el-popconfirm>
      </el-row>

      <el-table v-loading="loading" :data="tableData" stripe border @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column prop="tree" label="样木ID" fixed sortable width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="part" label="部位" align="center" show-overflow-tooltip />
        <el-table-column prop="p0" label="0根颈处" align="center" show-overflow-tooltip />
        <el-table-column prop="p05" label="0.5/10处" align="center" show-overflow-tooltip />
        <el-table-column prop="p1" label="1/10处" align="center" show-overflow-tooltip />
        <el-table-column prop="p2" label="2/10处" align="center" show-overflow-tooltip />
        <el-table-column prop="p3" label="3/10处" align="center" show-overflow-tooltip />
        <el-table-column prop="p4" label="4/10处" align="center" show-overflow-tooltip />
        <el-table-column prop="p5" label="5/10处" align="center" show-overflow-tooltip />
        <el-table-column prop="p6" label="6/10处" align="center" show-overflow-tooltip />
        <el-table-column prop="p7" label="7/10处" align="center" show-overflow-tooltip />
        <el-table-column prop="p8" label="8/10处" align="center" show-overflow-tooltip />
        <el-table-column prop="p9" label="9/10处" align="center" show-overflow-tooltip />

        <el-table-column prop="TH" label="树高" align="center" show-overflow-tooltip />

        <el-table-column prop="volume" label="材积(m³)" align="center" show-overflow-tooltip />
        <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip />
        <el-table-column prop="action" label="操作" fixed="right" align="center" width="100px">
          <template v-slot="scope">
            <el-button-group class="ml-3" size="small">
              <el-button v-if="scope.row.code != 'superAdmin'" type="success" :icon="Edit"
                @click="handleDialogValue(scope.row.id)" />
              <el-popconfirm v-if="scope.row.code != 'superAdmin'" title="您确定要删除这条记录吗？"
                @confirm="handleDelete(scope.row.id)">
                <template #reference>
                  <el-button type="danger" :icon="Delete" />
                </template>
              </el-popconfirm>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination v-model:currentPage="queryForm.pageNum" v-model:page-size="queryForm.pageSize" size="small"
        :page-sizes="[15, 30, 50, total > 100 ? total : 100]" layout="total, sizes, prev, pager, next" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-tab-pane>
  </el-tabs>

  <!-- <el-card style="max-width: 100%;margin-bottom: 15px;" shadow="never">
    <template #header>
      <span style="font-size: 15px; font-weight: bold;">数据录入/更新</span>
    </template>
  </el-card> -->

  <!-- <el-collapse v-model="activeNames" expand-icon-position="left">
    <el-collapse-item title="未录入直径的样木" name="1" :icon="CaretRight">
    </el-collapse-item>
    <el-collapse-item title="已录入数据" name="2" :icon="CaretRight">
    </el-collapse-item>
  </el-collapse> -->

  <!-- <el-card style="max-width: 100%" shadow="never">
    <template #header>
      <span style="font-size: 15px; font-weight: bold;">所有数据</span>
    </template>
  </el-card> -->

  <Dialog v-model="dialogVisible" :dialogVisible="dialogVisible" :id="id" :dialogTitle="dialogTitle"
    @initTreeDiaList="initTreeDiaList"></Dialog>

</template>

<script setup>
import { Search, Delete, DocumentAdd, Edit, Tools, RefreshRight } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue'
import Dialog from './components/dialog.vue'
import api, { getServerUrl } from "@/util/request";
import { ElMessage, ElMessageBox } from 'element-plus'
import { CaretRight } from '@element-plus/icons-vue'

const activeName = ref('first')  // tab
const activeNames = ref(['1'])
const formDaipiRef = ref(null)
const formPihouRef = ref(null)
const formQupiRef = ref(null)
const loading = ref(true)
const loading2 = ref(true)
const delBtnStatus = ref(true)
const treeId = ref(null)
const id = ref(-1)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const total = ref(0)
const total2 = ref(0)
const tableData = ref([])
const multipleSelection = ref([])
// 保存按钮样式
const daipiDisabled = ref(true)
const pihouDisabled = ref(true)
const qupiDisabled = ref(true)
const daipiType = ref('')
const pihouType = ref('')
const qupiType = ref('')

const queryForm = ref({
  query: '',
  pageNum: 1,
  pageSize: 15
})
const queryForm2 = ref({
  query: '',
  pageNum: 1,
  pageSize: 15
})

// 初始化表单字段
const formDaipi = ref(initForm({ part: '带皮直径' }))
const formPihou = ref(initForm({ part: '皮厚' }))
const formQupi = ref(initForm({ part: '去皮直径' }))

// console.log("1111", formDaipi, formPihou, formQupi.value)

function initForm({ id = -1, tree = treeId.value, part = '', p0 = null, p05 = null, p1 = null, p2 = null, p3 = null, p4 = null,
  p5 = null, p6 = null, p7 = null, p8 = null, p9 = null, volume = null, remark = '' } = {}) {
  return { id, tree, part, p0, p05, p1, p2, p3, p4, p5, p6, p7, p8, p9, volume, remark };
}

let treeSelect = ref([])

// 设置hover触发子菜单
const props_cascader = {
  expandTrigger: 'hover',
}
// 初始化字段列表
const initSelect = async () => {
  loading.value = true
  await api.get("tree/select").then((res) => {
    treeSelect.value = res.data.data
  })
}
initSelect()

const rules = ref({
  address: [
    { required: true, message: '请选择样地！' },
  ],
  treeSpecies: [
    { required: true, message: '请选择树种！' },
  ],
  year: [
    {
      validator: (rule, value, callback) => {
        if (value === '' || value === null || value === undefined) {
          callback(new Error(`请选择年份`)) // 允许为空
          return
        }

        const currentYear = new Date().getFullYear()
        if (value.getFullYear() > currentYear) {
          callback(new Error(`年份不能大于当前年份: ${currentYear}`))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  number: [
    { required: true, message: '请输入样木编号！' },
    { type: 'integer', message: '样木编号须为整数!', trigger: 'blur' }
  ],
  TH: [
    { type: 'number', message: '必须为数字', trigger: 'blur' },
  ]
})


// 保存

const handleSave = (type) => {
  if (type == 'daipi') {
    console.log(type, '带皮直径', formDaipi.value)

    formDaipiRef.value.validate(async (valid) => {
      if (valid) {
        await api.post("treedia/save", formDaipi.value).then((res) => {
          if (res.data.code == 200) {
            ElMessage.success(res.data.msg)
            // formDaipiRef.value.resetFields();
            initTreeDiaList()
          } else {
            ElMessage.error(res.data.msg);
          }
        })
      } else {
        console.log("字段校验失败！")
      }
    })

    daipiDisabled.value = true
    daipiType.value = ''
  } else if (type == 'pihou') {
    console.log(type, '皮厚', formPihou.value)

    formPihouRef.value.validate(async (valid) => {
      if (valid) {
        await api.post("treedia/save", formPihou.value).then((res) => {
          if (res.data.code == 200) {
            ElMessage.success(res.data.msg)
            // formPihouRef.value.resetFields();
            initTreeDiaList()
          } else {
            ElMessage.error(res.data.msg);
          }
        })
      } else {
        console.log("字段校验失败！")
      }
    })

    pihouDisabled.value = true
    pihouType.value = ''
  } else if (type == 'qupi') {
    console.log(type, '去皮直径', formQupi.value)

    formQupiRef.value.validate(async (valid) => {
      if (valid) {
        await api.post("treedia/save", formQupi.value).then((res) => {
          if (res.data.code == 200) {
            ElMessage.success(res.data.msg)
            // formQupiRef.value.resetFields();
            initTreeDiaList()
          } else {
            ElMessage.error(res.data.msg);
          }
        })
      } else {
        console.log("字段校验失败！")
      }
    })

    qupiDisabled.value = true
    qupiType.value = ''
  }
}

const getTreeDia = async (tree_id) => {
  await api.get('treedia/getTreeDia?tree_id=' + tree_id).then((res) => {
    if (res.data.code == 200) {
      if (res.data.daipi) {
        formDaipi.value = res.data.daipi
      } else {
        formDaipi.value = initForm({ part: '带皮直径', tree: tree_id })
      }
      if (res.data.pihou) {
        formPihou.value = res.data.pihou
      } else {
        formPihou.value = initForm({ part: '皮厚', tree: tree_id })
      }
      if (res.data.qupi) {
        formQupi.value = res.data.qupi
      } else {
        formQupi.value = initForm({ part: '去皮直径', tree: tree_id })
      }
    } else {
      formDaipi.value = initForm({ part: '带皮直径', tree: tree_id })
      formPihou.value = initForm({ part: '皮厚', tree: tree_id })
      formQupi.value = initForm({ part: '去皮直径', tree: tree_id })
    }
  })
  daipiDisabled.value = true
  daipiType.value = ''
  pihouDisabled.value = true
  pihouType.value = ''
  qupiDisabled.value = true
  qupiType.value = ''
}


// 监听 treeId 变化
watch(treeId, (newVal) => {
  if (newVal) {
    // console.log('@已选择样木：', newVal[3])
    formDaipi.value.tree = newVal[3]
    formPihou.value.tree = newVal[3]
    formQupi.value.tree = newVal[3]
    getTreeDia(newVal[3])
  } else {
    formDaipi.value = initForm({ part: '带皮直径' })
    formPihou.value = initForm({ part: '皮厚' })
    formQupi.value = initForm({ part: '去皮直径' })
  }

})

// 监听多个特定属性
watch(
  () => [formDaipi.value.p0, formDaipi.value.p05, formDaipi.value.p1, formDaipi.value.p2, formDaipi.value.p3, formDaipi.value.p4,
  formDaipi.value.p5, formDaipi.value.p6, formDaipi.value.p7, formDaipi.value.p8, formDaipi.value.p9, formDaipi.value.remark],
  () => {
    daipiDisabled.value = false
    daipiType.value = 'primary'
  }
)
// 监听多个特定属性
watch(
  () => [formPihou.value.p0, formPihou.value.p05, formPihou.value.p1, formPihou.value.p2, formPihou.value.p3, formPihou.value.p4,
  formPihou.value.p5, formPihou.value.p6, formPihou.value.p7, formPihou.value.p8, formPihou.value.p9, formPihou.value.remark],
  () => {
    pihouDisabled.value = false
    pihouType.value = 'primary'
  }
)
// 监听多个特定属性
watch(
  () => [formQupi.value.p0, formQupi.value.p05, formQupi.value.p1, formQupi.value.p2, formQupi.value.p3, formQupi.value.p4,
  formQupi.value.p5, formQupi.value.p6, formQupi.value.p7, formQupi.value.p8, formQupi.value.p9, formQupi.value.remark],
  () => {
    qupiDisabled.value = false
    qupiType.value = 'primary'
  }
)

// ================================== 所有数据 ==================================


const handleSelectionChange = (selection) => {
  multipleSelection.value = selection;
  delBtnStatus.value = selection.length == 0;
}

const handleDelete = async (id) => {
  var ids = []
  if (id) {
    ids.push(id)
  } else {
    multipleSelection.value.forEach(row => {
      ids.push(row.id)
    })
  }
  api.del("treedia/action", ids).then((res) => {
    if (res.data.code == 200) {
      ElMessage({
        type: 'success',
        message: '执行成功!'
      })
      initTreeDiaList();
    } else {
      ElMessage({
        type: 'error',
        message: res.data.msg,
      })
    }
  })
}
const addDia = (tree_id) => {
  // treeId.value = [null, null, null, tree_id]
  activeName.value = 'first'
  treeId.value = tree_id
  // getTreeDia(tree_id)
}

const handleDialogValue = (treeId) => {
  if (treeId) {
    id.value = treeId;
    dialogTitle.value = "信息修改"
  } else {
    id.value = -1;
    dialogTitle.value = "新增+"
  }
  dialogVisible.value = true
}

// ================================== 未录入直径的样木 ==================================
const NoDiaTree = ref([])
const initNoDiaTree = async () => {
  loading2.value = true
  await api.post('treedia/getnodiatree', queryForm2.value).then((res) => {
    if (res.data.code == 200) {
      // NoDiaTree.value = res.data.data
      NoDiaTree.value = (res.data.data || []).map(item => ({
        ...item,
        id: Number(item.id)
      }));
      total2.value = res.data.total;
      loading2.value = false
    }
  })
}

const handleSizeChange2 = (pageSize) => {
  queryForm2.value.pageNum = 1;
  queryForm2.value.pageSize = pageSize;
  initNoDiaTree();
}

const handleCurrentChange2 = (pageNum) => {
  queryForm2.value.pageNum = pageNum;
  initNoDiaTree();
}

// ================================== 已录入数据 ==================================
const initTreeDiaList = async () => {
  loading.value = true
  await api.post("treedia/search", queryForm.value).then((res) => {
    tableData.value = res.data.data;
    total.value = res.data.total;
    loading.value = false
  })
}

const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = pageSize;
  initTreeDiaList();
}

const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum;
  initTreeDiaList();
}

onMounted(() => {
  initTreeDiaList()
  initNoDiaTree()
})

</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 10px;
}

.sjlr {
  min-height: 620px;
  padding-top: 5px;

  li {
    border: 1px solid #ffffff;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;

    .title {
      line-height: 30px;
      padding: 5px 10px;
      color: var(--el-color-primary);
      font-weight: bold;
    }

    button {
      margin-left: 10px;
      padding: 5px 10px;
      width: 100px;
    }
  }

  li:hover {
    // color: var(--el-color-primary);
    box-shadow: 2px 2px 10px rgb(0, 0, 0, 0.1);
    // background-color: #fcfcfc;
    border: 1px solid #e9e9e9;
  }
}

.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  float: left;
  padding: 10px;
  box-sizing: border-box;
}

::v-deep th.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
}
</style>
